<template>
  <el-dialog :visible="visible" title="用户分配" @close="handleClose">

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="nameOfUser" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="checkRoleUserList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="roleUserTable" :data="formData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="code" label="用户工号" />
      <el-table-column prop="name" label="用户名" />
      <el-table-column prop="companyName" label="公司" />
      <el-table-column prop="departmentName" label="部门" />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirmSelection">确定</el-button>
    </span>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </el-dialog>
</template>

<script>
import { checkSingleRoleUserAPI, allocateSingleRoleSinglePageUserAPI } from '@/api/role'
import { Message } from 'element-ui'
export default {
  name: 'AllocateUserForm',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    selectedId: {
      type: String,
      required: true
    },
    // 用户表的全部信息
    userData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 页码相关-----------------------------------
      total: '', // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的记录数

      formData: [], // 表单显示的数据，值为userData.data

      nameOfUser: '', // 上方用户名称搜索栏

      selectedUsers: []// 多选框选中的用户集合信息
    }
  },
  watch: {
    userData: {
      handler(newValue) {
        this.formData = newValue.data
        this.total = newValue.total
      },
      deep: true // 如果你需要深度监听对象内部的变化
    },

    // 观测用户列表信息是否改变，如果改变，则更改勾选状态
    formData: {
      handler(newVal) {
        this.$nextTick(() => {
          newVal.forEach(row => {
            if (row.bindStatus === 1) {
              this.$refs.roleUserTable.toggleRowSelection(row, true)
            }
          })
        })
      }
    }

  },

  methods: {
    // 发送网络请求，进行用户列表搜索
    async checkRoleUserList() {
      const request = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        companyId: this.$store.getters.companyId,
        roleId: this.selectedId,
        name: this.nameOfUser
      }

      const response = await checkSingleRoleUserAPI(request)
      this.formData = response.data
      this.total = response.total
    },

    handleClose() {
      this.$emit('update:visible', false)
    },

    handleSelectionChange(selection) {
      this.selectedUsers = selection
    },
    // 确认按钮管理的方法，提交表单
    async confirmSelection() {
      const PageselectedIds = this.selectedUsers.map(row => row.id)
      const PageUserIds = this.formData.map(row => row.id)
      const request = {
        roleId: this.selectedId,
        currentPageSelectedIds: PageselectedIds,
        currentPageUserIds: PageUserIds,
        tenantId: 1552903303908687872
      }
      console.log('request:', request)

      const response = await allocateSingleRoleSinglePageUserAPI(request)
      if (response === true) {
        Message.success('分配用户成功')
        this.$emit('update:visible', false)
        return
      }
      Message.success('分配用户失败，请稍后再试')
      this.$emit('update:visible', false)
    },

    // 页码和页大小信息改变时，更改相应数据
    handleSizeChange(val) {
      this.pageSize = val
      this.checkRoleUserList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.checkRoleUserList()
    }

  }
}
</script>
